import React, { PropTypes } from 'react';
import { Button, Form, Select, Input } from 'antd';
import { selectOptions } from 'src/utils/transform';
import FormModal from 'components/decorator/formModal';
import { systemConstants } from 'src/utils/constants';
import TableForm from './tableForm';

const FormItem = Form.Item;

class CreateForm extends React.Component {

  render() {

    const { getFieldDecorator } = this.props.form;
    const { entity, relatedData } = this.props;
    const { basicInfo, fields } = entity;
    const { metaTypes, copyPath } = relatedData;


    const formItemLayout = {
      wrapperCol: { span: 24 },
    };

    return (
      <Form layout="inline" onSubmit={ this.props.doSubmit }>
        <FormItem
          label="索引名称："
        >
          {
            getFieldDecorator(
              'basicInfo.indexName',
              {
                initialValue: basicInfo.indexName || '',
              })(
              <Input />,
            )
          }
        </FormItem>
        <FormItem
          label="分片数："
        >
          {
            getFieldDecorator(
              'basicInfo.replicationFactor',
              {
                initialValue: basicInfo.replicationFactor || 0,
              })(
              <Input />,
            )
          }
        </FormItem>
        <FormItem
          label="每分片副本数："
        >
          {
            getFieldDecorator(
              'basicInfo.shardCount',
              {
                initialValue: basicInfo.shardCount || 0,
              })(
              <Input />,
            )
          }
        </FormItem>
        <FormItem
          label="选择引擎"
        >
          {
            getFieldDecorator('basicInfo.engineType', {
              initialValue: basicInfo.engineType ? (basicInfo.engineType + '') : '0',
            })(
              <Select style={{ width: '150px' }}>
                { selectOptions({
                  '0': 'solr',
                  '1': 'ES',
                }) }
              </Select>,
            )
          }
        </FormItem>
        <div className="form-br" />
        <FormItem {...formItemLayout}>
          {
            getFieldDecorator('fields', {
              initialValue: fields || [],
            })(
              <TableForm
                dataSource={ fields }
                enums={{
                  metaTypes: metaTypes,
                  copyPath: copyPath,
                }} />
            )
          }
        </FormItem>
        <div className="form-br" />
      </Form>
    );
  }
}

export default Form.create({})(FormModal(CreateForm));

